<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script src="js/flexible.js"></script>
		<script src="js/echarts.min旧版.js"></script>
		<script>
			window.onload=function(){
				var chartDom = document.getElementsByClassName('main')[0];
				var myChart = echarts.init(chartDom);
				var option;
				var colors=['red','orange','yellow','green','aqua','blue','purple']
				option={
				  tooltip: {
					trigger: 'axis',
					axisPointer: {
					  type: 'shadow'
					}
				  },
				  legend: {
					data: ['Profit',  'Income'],
					itemWidth:12,
					itemHeight:12,
					bottom:'0%',
					textStyle:{
						color:['blue','blue']
					}
				  },
				  grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					show:true,
					borderColor:'black',
					containLabel: true
				  },
				  xAxis: [
					{
					  type: 'value',
					  // show:false,
					  splitLine:{
						  show:false,
					  }
					}
				  ],
				  yAxis: [
					{
					  type: 'category',
					  axisTick: {
						show: false
					  },
					  axisLine:{
					  	show:false  
					  },
					  data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
					  inverse:true
					},
					{
					  axisLine:{
						show:false  
					  },
					  type: 'category',
					  axisTick: {
						show: false
					  },
					  data: [200, 170, 240, 244, 200, 220, 210],
					  inverse:true
					},
				  ],
				  series: [
					{
					  name: 'Profit',
					  type: 'bar',
					  label: {
						show: true,
						position: 'inside',
						formatter:"值为{c}",
						fontSize:10
					  },
					  center:["40%","50%"],
					  data: [200, 170, 240, 244, 200, 220, 210],
					  itemStyle:{
						  barBorderRadius:20,
						  color:function(param){
							  console.log(param);
							  return colors[param.dataIndex]
						  }
					  },
					  // 已定义2个Y轴，此处使用第一个
					  yAxisIndex:0,
					  barCategoryGap:65,
					  barWidth:10
					},
					{
					  name: 'Income',
					  type: 'bar',
					  stack: 'Total',
					  label: {
						show: false
					  },
					  // 已定义2个Y轴，此处使用第二个
					  yAxisIndex:1,
					  barWidth:16,
					  itemStyle:{
						color:'none',
						borderColor:"red",
						borderWidth:3,
						barBorderRadius:20,
					  },
					  data: [500, 500, 500, 500, 500, 500, 500]
					},
					// {
					//   name: 'Expenses',
					//   type: 'bar',
					//   stack: 'Total',
					//   label: {
					// 	show: true,
					// 	position: 'left'
					//   },
					//   emphasis: {
					// 	focus: 'series'
					//   },
					//   data: [-120, -132, -101, -134, -190, -230, -210]
					// }
				  ]
				}
				option && myChart.setOption(option);
				window.addEventListener('resize',()=>{
					myChart.resize()
				})
			}
		</script>
		<div style="width: 11rem;height: 8rem;margin-top: 50px;">
			<div class="main" style="width: 9rem;height: 5rem;margin-top: 50px;"></div>
		</div>
	</body>
</html>